<template>
  <h1>{{person}}</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪水：{{job.j.sa}}k</h2>
  <button @click="name+='qwe'">增长姓名</button><hr>
  <button @click="age+=1">增长年龄</button><hr>
  <button @click="job.j.sa++">涨薪</button>
</template>

<script>
    import {reactive, ref,shallowReactive,shallowRef,toRef,toRefs,watch} from 'vue'
    export default {
        name: "Demo",
        setup(){
            let person =shallowReactive({//只响应最外层
                name:'张三',
                age:18,
                job:{
                    j:{
                        sa:20
                    }
                }
            })

            let x = shallowRef(123)//x加1是响应式
            let y = shallowRef({
                z:1//y.z加1不会响应
            })

            //返回一个对象
            return {
                person,
                ...toRefs(person)
            }
        }
    }
</script>